import { EOrderParamType } from '@/types/orderList'
import React, { FC, useState } from 'react'

interface HeaderParam {
  callBack: (type: EOrderParamType) => void
}
const orderHeader: FC<HeaderParam> = (props) => {
  const [select, setSelect] = useState<EOrderParamType>(EOrderParamType.all)
  return (
    <div className="w-full h-r4.4 leading-r4.4 bg-gray-F7F7F8  text-gray-666666 text-r1.4 font-normal flex  font-medium-family">
      <div
        className="flex-1.2 relative text-center "
        onClick={() => {
          setSelect(EOrderParamType.all)
          props.callBack(EOrderParamType.all)
        }}
      >
        <span className={select === EOrderParamType.all ? ' font-medium text-gray-333333' : ' '}>
          全部
        </span>
        {select === EOrderParamType.all ? (
          <span className=" absolute left-1/2 transform -translate-x-1/2 bottom-0 w-r2.0 h-r0.3   bg-gradient-to-r from-orange-FF664F to-orange-FF3627 rounded-r0.4 "></span>
        ) : null}
      </div>
      <div
        className="flex-1.3 relative text-center "
        onClick={() => {
          setSelect(EOrderParamType.paySuccess)
          props.callBack(EOrderParamType.paySuccess)
        }}
      >
        <span
          className={select === EOrderParamType.paySuccess ? ' font-medium text-gray-333333' : ' '}
        >
          已支付
        </span>
        {select === EOrderParamType.paySuccess ? (
          <span className=" absolute left-1/2 transform -translate-x-1/2 bottom-0 w-r2.0 h-r0.3   bg-gradient-to-r from-orange-FF664F to-orange-FF3627 rounded-r0.4 "></span>
        ) : null}
      </div>
      <div
        className="flex-1.3 relative text-center "
        onClick={() => {
          setSelect(EOrderParamType.paying)
          props.callBack(EOrderParamType.paying)
        }}
      >
        <span className={select === EOrderParamType.paying ? ' font-medium text-gray-333333' : ' '}>
          待支付
        </span>
        {select === EOrderParamType.paying ? (
          <span className=" absolute left-1/2 transform -translate-x-1/2 bottom-0 w-r2.0 h-r0.3   bg-gradient-to-r from-orange-FF664F to-orange-FF3627 rounded-r0.4 "></span>
        ) : null}
      </div>
      <div
        className="flex-1.2 relative text-center "
        onClick={() => {
          setSelect(EOrderParamType.cannel)
          props.callBack(EOrderParamType.cannel)
        }}
      >
        <span className={select === EOrderParamType.cannel ? ' font-medium text-gray-333333' : ' '}>
          已取消
        </span>
        {select === EOrderParamType.cannel ? (
          <span className=" absolute left-1/2 transform -translate-x-1/2 bottom-0 w-r2.0 h-r0.3   bg-gradient-to-r from-orange-FF664F to-orange-FF3627 rounded-r0.4 "></span>
        ) : null}
      </div>
    </div>
  )
}

export default orderHeader
